<template>
	<view class="detail">
		<!-- 背景毛玻璃色 -->
		<view class="fixbg" :style="{'background-image' : `url(${songDetail.al.picUrl})`}"></view>
		<!-- 图标和顶部文字区 -->
		<MusicHead :title='songDetail.name' :icon='true' color='white'></MusicHead>
		
		<view class="container">
			<scroll-view scroll-y="true" >
				<!-- 歌曲封面唱片转圈圈样式以及歌词 -->
				<view class="detail-play" @tap="handleToPlay">
					<!-- 唱片里的歌曲封面图 -->
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run' : isPlayRotate}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY(' + -(lyricIndex-1)*82 + 'rpx)'}">
						<!-- 歌词 -->
						<view 
							class="detail-lyric-item" 
							v-for="(i,index) in songLyric" 
							:key='index'
							:class="{active : lyricIndex===index}">
							{{ i.lyric }}
						</view>
					</view>
				</view>
				<!-- 相关歌曲 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<!-- 相关歌曲的封面、歌名、作者、播放按钮 -->
					<view class="detail-like-item" v-for="(i,index) in simiSong" :key='index' @tap="handleToSimi(i.id)">
						<view class="detail-like-img">
							<image :src="i.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{i.name}}</view>
							<view>
								<image src="../../static/dujia.png" v-if="i.privilege.flag>60 && i.privilege.flag<70"></image>
								<image src="../../static/sq.png" v-if="i.privilege.maxbr === 999000"></image>
								{{i.artists[0].name}} - {{i.album.name}}
							</view>
						</view>
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
				<!-- 评论区 -->
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-item" v-for="(i,index) in songComment">
						<!-- 头像 -->
						<view class="detail-comment-img">
							<image :src="i.user.avatarUrl" mode=""></image>
						</view>
						<!-- 评论详情 -->
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<!-- 评论者昵称以及是否是vip和评论时间 -->
								<view class="detail-comment-name">
									<view>
										<text>{{i.user.nickname}}</text>
										<view class="vip" v-show="i.user.vipRights!==null">
											<image src="../../static/vip.png" mode=""></image>
										</view>
									</view>
									<view>
										{{i.time | formatTime}}
									</view>
								</view>
								<!-- 点赞 -->
								<view class="detail-comment-like">
									{{i.likedCount | formatCount}}
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								{{i.content}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MusicHead from '../../components/musichead/MusicHead.vue'
	import '@/common/iconfont.css';
	import {getSongDetail, getSimiSong, getSongComment, getSongLyric, getSongUrl} from '../../common/api.js'
	
	export default {
		components:{MusicHead},
		data() {
			return {
				songDetail:{
					// 如果不预先定义一下就会出现undefined的报错，当然不会影响程序，但是看着不舒服
					// [渲染层网络层错误] Failed to load local image resource /pages/list/undefined the server responded with a status of 500
					al:{
						picUrl:''
					}
				},
				simiSong:[],
				songComment:[],
				songLyric:[],
				// 控制歌词选中状态
				lyricIndex:0,
				// 控制歌曲播放
				isPlayRotate:true,
				// icon图标播放or暂停
				iconPlay:'icon-zanting'
			}
		},
		methods: {
			// 调接口的方法整体封装一下
			getMusic(id){
				// 把当前歌曲的id传进去，得到下一首歌的id，从而能够连续播放
				this.$store.commit('NEXT_ID',id);
			
				// 等所有请求都成功之后再回调
				Promise.all([ getSongDetail(id), getSimiSong(id), getSongComment(id), getSongLyric(id), getSongUrl(id) ]).then((res)=>{
					if(res[0][1].data.code===200){
						this.songDetail=res[0][1].data.songs[0]
					}
					if(res[1][1].data.code===200){
						this.simiSong=res[1][1].data.songs
					}
					if(res[2][1].data.code===200){
						this.songComment=res[2][1].data.hotComments
					}
					if(res[3][1].data.code===200){
						// 处理歌词变成一个时间节点对应一句歌词(键值形式)，因此要用正则表达式
						let lyric=res[3][1].data.lrc.lyric
						let re = /\[([^\]]+)\]([^[]+)/g
						// 也可以用实例化写法 let re = new RegExp(/\[([^\]]+)\]([^[]+)/g)
						let result=[]
						// replace方法详解:https://www.cnblogs.com/ldq678/p/9375185.html
						lyric.replace(re, ($0,$1,$2)=>{
							result.push({'time':this.formatTimeToSeconds($1), 'lyric':$2})
						})
						this.songLyric=result
					}
					if(res[4][1].data.code===200){
						// uniapp自带的音频方法，我们把它直接加到vc实例对象中
						this.bgAudioManager = uni.getBackgroundAudioManager();
						// console.log(this)
						this.bgAudioManager.title = this.songDetail.name;
						this.bgAudioManager.src = res[4][1].data.data[0].url;
						this.listenLyricIndex();
						// 监听
						this.bgAudioManager.onPlay(()=>{
							this.iconPlay='icon-zanting';
							this.isPlayRotate=true;
							this.listenLyricIndex();
						});
						this.bgAudioManager.onPause(()=>{
							this.iconPlay='icon-bofang';
							this.isPlayRotate=false;
							this.cancelLyricIndex();
						});
						this.bgAudioManager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
					}
				})
			},
			formatTimeToSeconds(value){
				let arr=value.split(':')
				// string和number运算得到number因此不用做parseFloat；此外要注意.toFixed()方法返回的是string
				return (arr[0]*60 + parseFloat(arr[1])).toFixed(1) 
			},
			handleToPlay(){
				if(this.bgAudioManager.paused){
					this.bgAudioManager.play()
				}else{
					this.bgAudioManager.pause()
				}
			},
			// 歌词变化
			listenLyricIndex(){
				clearInterval(this.timer);
				// 监听歌词的变化,500毫秒监听一次
				this.timer=setInterval(()=>{
					for(let i=0;i<this.songLyric.length;i++){
						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length-1].time){
							this.lyricIndex=this.songLyric.length-1;
							break;
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time){
							this.lyricIndex=i;
						}
					}
				},500)
			},
			// 关闭定时器
			cancelLyricIndex(){
				clearInterval(this.timer);
			},
			// 播放另一首
			handleToSimi(id){
				this.getMusic(id)
			}
		},
		onLoad(options) {
			// console.log(options.id)
			this.getMusic(options.id);
		},
		onUnload(){
			this.cancelLyricIndex();
		},
		onHide(){
			this.cancelLyricIndex();
		}
	}
</script>

<style scoped>
	.detail-play{
		width: 580rpx; 
		height: 580rpx; 
		background:url(~@/static/disc.png);
		background-size: cover;
		margin:214rpx auto 0 auto;
		position: relative;
	}
	.detail-play image{
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		/* 有几种子元素在父元素中居中的方法 */
		/* 一、将子元素的top，right，bottom，left均设为0，然后设置子元素 margin: auto; */
		/* 二、子元素top，left设置为50%，子元素margin的top，left减去自身高，宽的一半。 */
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -185rpx 0 0 -185rpx;
		/* 三、子元素top，let设为50%，transform: translate(-50%, -50%);  */
		/* and so on */
		animation:10s linear infinite move; animation-play-state: paused;
	}
	/* 旋转 */
	.detail-play .detail-play-run{ animation-play-state: running;}
	@keyframes move{
		from{ transform : rotate(0deg);}
		to{ transform : rotate(360deg);}
	}
	.detail-play text{
		/* 为什么行级元素可以设置宽高 */
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}
	.detail-play view{
		width: 230rpx;
		height: 360rpx;
		background: url(~@/static/needle.png);
		/* 只有设置了定位，原来的空间才会丢失 */
		position: absolute;
		/* left: 50%;
		margin-left: -115rpx; */
		left: 120rpx;
		right: 0;
		top: -200rpx;
		margin: auto;
		background-size: cover;
	}
	.detail-lyric{
		font-size: 32rpx;
		line-height: 82rpx;
		width: ;
		height: 246rpx;
		text-align: center;
		overflow: hidden;
		color: #6f6e73;
	}
	.detail-lyric-wrap{transition: 0.5s;}
	.detail-lyric-item{
		height: 82rpx;
	}
	.active{color: white;}
	
	.detail-like{margin: 0 30rpx;}
	.detail-like-head{font-size: 36rpx;color: white;margin: 40rpx 0;}
	.detail-like-item{display: flex;align-items: center;margin-bottom: 28rpx;}
	.detail-like-img{width: 82rpx; height: 82rpx; border-radius: 20rpx; overflow: hidden; margin-right: 20rpx;}
	.detail-like-img image{width: 100%; height: 100%; }
	.detail-like-song view:nth-child(1){font-size: 28rpx; color: white;margin-bottom: 12rpx;}
	.detail-like-song view:nth-child(2){font-size: 22rpx; color: #c6c2bf;}
	.detail-like-song{flex: 1;}
	.detail-like-song image{width: 26rpx; height: 20rpx; margin-right: 10rpx;}
	.detail-like-item text{font-size: 50rpx;color: #c6c2bf;}
	
	.detail-comment{margin: 0 30rpx;}
	.detail-comment-head{margin: 40rpx 0;font-size: 36rpx;color: white;} 
	.detail-comment-item{display: flex;margin-bottom: 28rpx;}
	.detail-comment-img{width: 64rpx; height: 64rpx; border-radius: 50%; overflow: hidden;}
	.detail-comment-img image{width: 100%; height: 100%;}
	.detail-comment-content{flex: 1; margin-left: 18rpx;}
	.detail-comment-title{display: flex; justify-content: space-between;align-items: center;}
	.detail-comment-name{color: #cbcacf; }
	.detail-comment-name view:nth-child(1){display: flex; align-items: center;}
	.detail-comment-name view:nth-child(1) text{font-size: 26rpx;}
	.detail-comment-name view:nth-child(1) .vip{width: 50rpx; height: 20rpx; overflow: hidden;margin-left: 10rpx;}
	.detail-comment-name view:nth-child(1) .vip image{width: 100%; height: 100%;}
	.detail-comment-name view:nth-child(2){font-size: 20rpx;}
	.detail-comment-like{font-size: 28rpx; color: #cbcacf;}
	.detail-comment-like text{font-size: 38rpx;}
	.detail-comment-text{font-size: 28rpx; line-height: 40rpx; color: white; margin-top: 16rpx; border-bottom: solid 2rpx #cbcacf; padding-bottom: 30rpx;}
</style>
